const Item = React.createClass({
    render(){
        return (
            <li><a href="javascript:void(0)">{this.props.children}</a></li>
        );
    }
})
const Dropdown = React.createClass({
    getInitialState(){
        return {
            open: false,
        }
    },
    componentDidMount(){
        const self = this;
        window.addEventListener('click', (e)=> {
            // self.setState({open: false})
        })
    },
    componentWillUnMount(){
        window.removeEventListener('click', (e)=> {
        })
    },
    render(){
        return (
            <div className={'dropdown ' + (this.state.open ? 'open' : '')}>
                <button className="btn btn-default dropdown-toggle btn-xs" type="button" onClick={()=> {
                    this.setState({open: !this.state.open});
                }}>
                    {this.props.title}
                    <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" style={{maxHeight: 200, overflow: 'auto'}}>
                    {this.props.children}
                </ul>
            </div>
        )
    }
})
Dropdown.Item = Item;
export default Dropdown;